<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        训练概况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">训练类型</div>
                                    <div class="count pear-text">自然灾害模拟</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预计参训人数</div>
                                    <div class="count pear-text">150</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预计完成时间</div>
                                    <div class="count pear-text">15min</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">平均完成时间</div>
                                    <div class="count pear-text">12min</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        训练情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">训练次数</div>
                                    <div class="count pear-text">1</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">按时撤离率</div>
                                    <div class="count pear-text">96%</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最快完成时间</div>
                                    <div class="count pear-text">12分钟</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最慢完成时间</div>
                                    <div class="count pear-text">17分钟</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">撤离路线预览</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">训练信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p></p>
                            <p></p>
                            训练名称&nbsp;<span>火灾逃生</span>&nbsp;&nbsp;
                            重要程度<span> A</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            7天使用总次数&nbsp;<span>1</span>&nbsp;&nbsp;
                           7天使用比例<span>100%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">参与信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>名称</td>
                        <td>火灾逃生演练</td>
                    </tr>

                    <tr>
                        <td>模拟地点</td>
                        <td>深圳监所</td>
                    </tr>
                    <tr>
                        <td>预计参与警员数</td>
                        <td>30人</td>
                    </tr>
                    <tr>
                        <td>预计参与犯人数</td>
                        <td>120人</td>
                    </tr>
                    <tr>
                        <td>预计撤离人数</td>
                        <td>150人</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts

       var ROOT_PATH =
        'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

var chartDom = document.getElementById('echarts-records');
var myChart = echarts.init(chartDom, 'dark');
var option;

$.get(
  ROOT_PATH + '/data/asset/geo/MacOdrum-LV5-floorplan-web.svg',
  function (svg) {
    echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
    option = {
      title: {
        text: '监狱一层逃生模拟图',
        left: 'center',
        bottom: 10
      },
      tooltip: {},
      geo: {
        map: 'MacOdrum-LV5-floorplan-web',
        roam: true,
        emphasis: {
          itemStyle: {
            color: undefined
          },
          label: {
            show: false
          }
        }
      },
      series: [
        {
          name: 'Route1',
          type: 'lines',
          coordinateSystem: 'geo',
          geoIndex: 0,
          emphasis: {
            label: {
              show: false
            }
          },
          polyline: true,
          lineStyle: {
            color: '#c46e54',
            width: 5,
            opacity: 1,
            type: 'dotted'
          },data: [
            {
              coords: [
                [110.6189462165178, 456.64349563895087],
                [124.10988522879458, 450.8570048730469],
                [123.9272226116071, 389.9520693708147],
                [61.58708083147317, 386.87942320312504],
                [61.58708083147317, 72.8954315876116],
                [258.29514854771196, 72.8954315876116],
                [260.75457021484374, 336.8559607533482],
                [280.5277985253906, 410.2406672084263],
                [275.948185765904, 528.0254369698661],
                [111.06907909458701, 552.795792593471],
                [118.87138231445309, 701.365737015904],
                [221.36468155133926, 758.7870354617745],
                [307.86195445452006, 742.164737297712],
                [366.8489324762834, 560.9895157073103],
                [492.8750778390066, 560.9895157073103],
                [492.8750778390066, 827.9639780566406],
                [294.9255269587053, 827.9639780566406],
                [282.79803391043527, 868.2476088113839]
              ]
            }
          ]
        }
      ]

    };
    myChart.setOption(option);
  }
);

    option && myChart.setOption(option);

  });

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;

    laypage.render({
        elem: 'demo2'
        ,count: 100
        ,theme: '#1E9FFF'
      });
    })
</script>
</body>
</html>